<template>
    <div id="newsDetails">
        <header>
            <el-form ref="form" prop="">
                <el-form-item label="文章标题">
                    <el-input v-model="searchData" placeholder="根据文章标题进行搜索"></el-input>
                </el-form-item>
            </el-form>
            <el-form ref="form" prop="">
                <el-button @click="submitForm" size="medium" class="addSubimit">提交</el-button>
                <el-button @click="previousPage" size="medium" class="addSubimit">返回上一页</el-button>
            </el-form>
        </header>
        <main>
            <el-row v-loading="quillUpdateImg">
                <quill-editor v-model="detailContent" ref="myQuillEditor" :options="editorOption" ></quill-editor>
            </el-row>
            <el-upload
                v-show="uploader"
                class="avatar-uploader"
                action="https://www.yyjpai.com/index/operate/uploadsImg"
                name="file"
                :show-file-list="false"
                :on-success="uploadSuccess"
                :before-upload="beforeUpload">
            </el-upload>
        </main>
    </div>
</template>
<script>
import { toolbarOptions } from '@/assets/js'
export default {
  data() {
    return {
        id:'',//列表ID
        uploader:false,//隐藏上传图片
        quillUpdateImg: false, // loading动画
        detailContent: "",//富文本内容
        searchData: "",//标题
        editorOption: {//富文本配置
            placeholder: "请输入内容",
            theme: "snow", // or 'bubble'
            modules: {
                toolbar: {//
                    container: toolbarOptions(), // 工具栏
                    handlers: {//改变原生按钮
                        image: function(value) {//图片
                            if (value) {
                                document.querySelector(".avatar-uploader input").click();
                            }
                        }
                    }
                }
            }
      }
    };
  },
  methods: {
    previousPage:function(){//返回上一页
        this.$router.go(-1)
    },
    submitForm:function(){//提交
        this.$axios.getAddressJson("/information/editDesc", { id: this.id,desc:this.detailContent })
        .then((res) => {
            this.$message({
                type: 'success',
                message: '保存成功!'
            });
            setTimeout(()=>{this.$router.go(-1)},1000)
        });
    },
    beforeUpload(res, file) { //上传图片之前
      this.quillUpdateImg = true;
    },
    uploadSuccess(res, file) {// 上传图片成功
      // 获取富文本组件实例
      let quill = this.$refs.myQuillEditor.quill;
      if (res.code === "1" && res.data.logo !== null) {
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片  res.info为服务器返回的图片地址
        quill.insertEmbed(length, "image", res.data.logo);
        // 调整光标到最后
        quill.setSelection(length + 1);
      } else {
        this.$message.error("图片插入失败");
      }
      // loading动画消失
      this.quillUpdateImg = false;
    }
  },
  mounted: function(e) {
      
    let id = this.$route.query.id;
    //渲染页面
    // console.log(this.$route.query.id)
    this.id = this.$route.query.id;
    this.$axios.getAddressJson("/information/informationDesc", { id: id })
    .then(res => {
        this.searchData =  res.data.data.info.title;
        this.detailContent = res.data.data.info.desc;
       
    });
  }
};
</script>
<style>

    /* .el-form-item{margin: 0} */
     #newsDetails header{
         padding: 0 20px;
     }
    #newsDetails .quill-editor,.el-row{
        height: 570px
    }
    #newsDetails .el-form-item{
        margin-bottom: 0;
    }
    #newsDetails .ql-toolbar.ql-snow{
        height: 70px;
    }
    #newsDetails .ql-container.ql-snow{
        height: 500px;
        
    }
    @media screen and (max-height: 800px) {
        #newsDetails .ql-container.ql-snow{
          height: 400px;
        }
    }
    #newsDetails main{
        padding: 20px;
        box-sizing: border-box;
    }
    #newsDetails .addSubimit{
        margin-left: 20px;
        margin-top:0;
        margin-bottom: 0; 
        height: 40px;
        /* line-height: 40px; */
    }
</style>

